/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 11:28:36
 * @Description: 首页-应用工具-手机归属地
 */
import React from "react";
import "@/assets/style/search.scss";
import { observer, inject } from "mobx-react";

@inject("PhoneLocationStore")
@observer
class PhoneLocation extends React.Component {
    handleChange = e => {
        this.props.PhoneLocationStore.changeKeyWords(e.target.value.trim());
    };
    handleSearch = () => {
        this.props.PhoneLocationStore.getLocation();
    };
    render() {
        const { result } = this.props.PhoneLocationStore;
        return (
            <div className="common-search">
                <div className="inner">
                    <h1 className="title">手机地址归属检索</h1>
                    <div className="search-wrap">
                        <input type="text" onChange={this.handleChange} placeholder="请输入任意APP或关键字" />
                        <button className="btn" onClick={this.handleSearch}>
                            搜索
                        </button>
                    </div>
                </div>
                {result && (
                    <div className="retrieval-result">
                        <span className="retrieval-result-default">结果</span>
                        <span className="retrieval-result-text">{result}</span>
                    </div>
                )}
            </div>
        );
    }
}

export default PhoneLocation;
